<!--
    by: yuanbiao 2021年01月26日
    name: x-toast
    notes:
-->
<template>
  <transition
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
    @after-leave="afterLeaveHandler"
  >
    <div v-show="visible" :class="prefixCls">
      <!-- <slot> -->
        <p v-if="!dangerouslyUseHTMLString" :class="`${prefixCls}__inner`">{{ message }}</p>
        <p v-else v-html="message" :class="`${prefixCls}__inner`"></p>
      <!-- </slot> -->
    </div>
  </transition>
</template>

<script>
const prefixCls = 'x-toast'
export default {
  name: 'x-toast',
  data() {
    return {
      prefixCls: prefixCls,
      visible: false,
      message: '',
      duration: 1500,
      timer: null,
      onClose: null,
      dangerouslyUseHTMLString: false
    }
  },
  mounted () {
    this.startTimer()
  },
  methods: {
    afterLeaveHandler () {
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    },
    close () {
      this.visible = false
      if (typeof this.onClose === 'function') {
        this.onClose(this)
      }
    },
    startTimer () {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (this.visible) {
            this.close()
          }
        }, this.duration)
      }
    }
  }
}
</script>
